<script setup lang="ts">
defineOptions({
  name: "consumableItems"
});

import { ref, onMounted } from "vue";
import { WarnTriangleFilled, ToolsPx, ArrowRight } from "@px-ui/icons-vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { queryEquipmentConsumableQuantity } from "@/api/modules/machine";

const routeStore = useRouterStoreHook();
const loading = ref<boolean>(false);
const data = ref<Record<string, any>>({});

const typeId = defineModel("typeId", { type: String, default: "" });
const emits = defineEmits(["typeIdChange"]);

const selectDeviceHandler = (typeId_: string) => {
  typeId.value = typeId_;
  emits("typeIdChange", typeId_);
};

const queryEquipmentConsumableQuantityFn = async () => {
  loading.value = true;
  const className = routeStore.getSubject;
  // 公司 写死 593
  const typeId_ = "593";
  // 厂内 写死 584
  // const typeId_ = "584";
  const queryDateStart = "";
  const queryDateEnd = "";
  const params = { className, typeId: typeId_, queryDateStart, queryDateEnd };
  let res = await queryEquipmentConsumableQuantity(params, () => {
    loading.value = false;
  });
  data.value = res;
  typeId.value = res.typeId;
  selectDeviceHandler(res.typeId);
  loading.value = false;
};

onMounted(async () => {
  await queryEquipmentConsumableQuantityFn();
});
</script>

<template>
  <px-scrollbar v-loading="loading" class="consumableItems">
    <div class="consumableItems-item">
      <div class="item-title">{{ `${data?.typeName}（${data?.quantity}）` }}</div>
      <div class="item-content">
        <div v-for="item in data?.consumableQuantityList" :key="item.model" class="item-content-item">
          <div class="item-common item-name">{{ item.model }}</div>
          <div class="item-common item-repertory">
            <span class="repertory-text" :style="{ color: item.quantity < 20 ? 'red' : '#333' }">{{ `库存：${item.quantity} 件` }}</span>
            <px-icon v-if="item.quantity < 20"><WarnTriangleFilled /></px-icon>
          </div>
          <div class="item-common item-warning" @click="selectDeviceHandler(data?.typeId)">
            <px-icon><ToolsPx /></px-icon>
            <span class="warning-text">
              <span class="text-num">
                {{ item.expiryWarningQuantity }}
                <span class="text-unit">台</span>
              </span>
              <px-icon><ArrowRight /></px-icon>
            </span>
          </div>
        </div>
      </div>
    </div>
  </px-scrollbar>
</template>

<style lang="scss" scoped>
.consumableItems {
  :deep(.px-scrollbar__view) {
    box-sizing: border-box;
    display: flex;
    gap: 16px;
    padding-bottom: 16px;

    .consumableItems-item {
      display: flex;
      flex-direction: column;
      border: 1px solid #ddd;
      border-radius: 8px;

      .item-title {
        box-sizing: border-box;
        height: 36px;
        padding: 0 24px;
        font-weight: 600;
        line-height: 36px;
        color: #333;
        text-align: center;
        letter-spacing: 2px;
        background-color: #e7eefb;
        border-bottom: 1px solid #ddd;
      }

      .item-content {
        display: flex;

        .item-content-item {
          border-right: 1px solid #ddd;

          &:last-of-type {
            border-right: none;
          }

          .item-common {
            box-sizing: border-box;
            width: 140px;
            height: 36px;
            padding: 0 12px;
          }

          .item-name {
            font-size: 13px;
            font-weight: 600;
            line-height: 36px;
            color: #333;
            border-bottom: 1px solid #ddd;
          }

          .item-repertory {
            display: flex;
            gap: 4px;
            align-items: center;
            border-bottom: 1px solid #ddd;

            .repertory-text {
              height: 36px;
              font-size: 13px;
              font-weight: 500;
              line-height: 36px;
              color: #333;
            }

            .px-icon {
              font-size: 18px;
              color: red;
            }
          }

          .item-warning {
            display: flex;
            gap: 16px;
            align-items: center;
            justify-content: space-between;
            background-color: #ffddde;

            &:hover {
              cursor: pointer;
              background-color: rgb(255 238 238 / 90%);
            }

            .px-icon {
              font-size: 24px;
              font-weight: 600;
              color: red;
            }

            .warning-text {
              display: flex;
              flex-wrap: nowrap;
              gap: 6px;
              align-items: center;
              height: 36px;

              .text-num {
                font-size: 22px;
                font-weight: 600;
                line-height: 1;
                color: red;
                white-space: nowrap;

                .text-unit {
                  font-size: 12px;
                  font-weight: 600;
                  line-height: 1;
                  color: red;
                }
              }

              .px-icon {
                font-size: 18px;
                font-weight: 600;
                color: #999;
              }
            }
          }
        }
      }
    }
  }
}
</style>
